<template>
    <el-card>
      <div>
        <div v-for="p in state" :key="p.id">
          <div class="all">
            <el-checkbox
              v-model="p.isCheckAll"
              :indeterminate="p.isIndeterminate"
              @change="checkAllChange(p)"
              >{{ p.name }}</el-checkbox
            >
          </div>
          <el-checkbox-group v-model="p.checkeds" @click="gourpChange(p)">
            <el-checkbox v-for="c in p.children" :key="c.id" :label="c.id">{{
              c.name
            }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="flex">
          <el-button>清空</el-button>
          <el-button type="primary" @click="clickHandle">确定</el-button>
        </div>
      </div>
    </el-card>
  </template>
  <script setup lang="ts">
  import {
    getRourceListByRoleIdApi,
    resourceListAllApi,
    resourceCategoryAllApi,
    allocResourceApi
  } from "./api";
  import { useRoute } from "vue-router";
  import { ref } from "vue";
  import { type } from "os";
  const route = useRoute();
  
  type IState = IResourceCategoryModel & {
    children: IResourceModel[];
    checkeds: number[];
    //   全选
    isCheckAll: boolean;
    //   半选
    isIndeterminate: boolean;
  };
  
  let state = ref<IState[]>([]);
  if (route.query.id) {
    // 三个请求都成功，才组织双层结构
    Promise.all([
      resourceCategoryAllApi(),
      resourceListAllApi(),
      getRourceListByRoleIdApi(parseInt(route.query.id as string)),
    ])
      .then((res) => {
        state.value = res[0].data.map((item) => ({
          ...item,
          children: [],
          checkeds: [],
          isCheckAll: false,
          isIndeterminate: false,
        }));
        console.log(res);
        res[1].data.forEach((citem) => {
          const Plist = state.value.find(
            (pitem) => pitem.id === citem.categoryId
          );
          Plist && Plist.children.push(citem);
        });
        res[2].data.forEach((item) => {
          const pp = state.value.find((p) => p.id === item.categoryId);
          pp && pp.checkeds.push(item.id);
        });
        state.value.forEach((pp) => {
          // 全选
          pp.isCheckAll = pp.checkeds.length === pp.children.length;
          // 半选
          pp.isIndeterminate =
            pp.checkeds.length > 0 && pp.checkeds.length < pp.children.length;
        });
        console.log(state);
      })
      .catch(() => {});
  }
  
  const checkAllChange = (data: IState) => {
    if (!data.isCheckAll) {
      data.checkeds = [];
    } else {
      data.checkeds = data.children.map((item) => item.id);
    }
    data.isIndeterminate =
      data.checkeds.length > 0 && data.checkeds.length < data.children.length;
  };
  
  const gourpChange = (data: IState) => {
    // 全选
    data.isCheckAll = data.checkeds.length === data.children.length;
    // 半选
    data.isIndeterminate =
      data.checkeds.length > 0 && data.checkeds.length < data.children.length;
  };
  
  const clickHandle = () => {
    allocResourceApi({
      roleId: parseInt(route.query.id as string),
      // 把所有勾选的id发回服务器
      resourceIds: state.value.reduce<number[]>((prev, next) => {
        // concat合并数组
        return prev.concat(next.checkeds);
      }, []),
    });
  };
  </script>
  <style lang="less" scoped>
  .all {
    padding: 20px;
    background-color: #f2f6fc;
  }
  :deep(.el-checkbox-group) {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding: 20px;
  }
  .flex {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
  </style>
  